<template>
  <view class="collect-page">
    <!-- 收藏列表 -->
    <scroll-view class="collect-list" scroll-y>
      <view 
        class="collect-item" 
        v-for="(item, index) in collectList" 
        :key="index"
      >
        <image class="product-img" :src="item.image" mode="aspectFill"></image>
        <view class="product-info">
          <text class="name">{{item.name}}</text>
          <text class="price">¥{{item.price}}</text>
          <text class="sales">已售{{item.sales}}件</text>
        </view>
        <view class="product-action">
          <view class="buy-btn" @click="goProductDetail(item)">
            <text>去购买</text>
          </view>
          <view class="delete-btn" @click="deleteCollect(item, index)">
            <uni-icons type="trash" size="20" color="#999"></uni-icons>
          </view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view class="empty" v-if="collectList.length === 0">
        <image src="/static/empty-collect.png" mode="aspectFit"></image>
        <text class="tip">您还没有收藏商品哦~</text>
        <view class="go-btn" @click="goHome">
          <text>去逛逛</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      collectList: [
        {
          id: 1,
          name: '新款智能手机 6.5英寸大屏 8GB+256GB',
          price: 2999,
          sales: 1200,
          image: '/static/product1.jpg'
        },
        {
          id: 2,
          name: '无线蓝牙耳机 高音质 超长续航',
          price: 199,
          sales: 850,
          image: '/static/product2.jpg'
        },
        {
          id: 3,
          name: '智能手表 心率监测 50米防水',
          price: 599,
          sales: 320,
          image: '/static/product3.jpg'
        }
      ]
    }
  },
  methods: {
    goProductDetail(item) {
      uni.navigateTo({
        url: `/pages/product/detail?id=${item.id}`
      })
    },
    deleteCollect(item, index) {
      uni.showModal({
        title: '提示',
        content: `确定要删除"${item.name}"吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '删除中...'
            })
            // 模拟API请求
            setTimeout(() => {
              uni.hideLoading()
              this.collectList.splice(index, 1)
              uni.showToast({
                title: '删除成功',
                icon: 'success'
              })
            }, 800)
          }
        }
      })
    },
    goHome() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  }
}
</script>

<style>
.collect-page {
  height: 100vh;
  background-color: #f7f7f7;
}
.collect-list {
  height: 100%;
  padding: 20rpx;
}
.collect-item {
  display: flex;
  padding: 20rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
}
.product-img {
  width: 180rpx;
  height: 180rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}
.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 15rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.price {
  font-size: 32rpx;
  color: #ff2d4a;
  font-weight: bold;
  margin-bottom: 15rpx;
}
.sales {
  font-size: 24rpx;
  color: #999;
}
.product-action {
  width: 120rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}
.buy-btn {
  width: 100rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  background-color: #ff2d4a;
  color: #fff;
  font-size: 24rpx;
  border-radius: 25rpx;
}
.delete-btn {
  width: 50rpx;
  height: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100rpx;
}
.empty image {
  width: 300rpx;
  height: 300rpx;
  margin-bottom: 30rpx;
}
.tip {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 40rpx;
}
.go-btn {
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  background-color: #ff2d4a;
  color: #fff;
  font-size: 28rpx;
  border-radius: 35rpx;
}
</style>